<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link  rel="stylesheet" type="text/css" href="../../css/resources/css/ext-all.css"></link>
<link  rel="stylesheet" type="text/css" href="../../css/Spinner.css"></link>
<script type="text/javascript" src="../../ext3.2.1/ext-base.js"></script>
<script type="text/javascript" src="../../ext3.2.1/ext-all.js"></script>
<script type="text/javascript" src="../../ext3.2.1/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="../../js/DateTimeField.js"></script>
<script type="text/javascript" src="../../js/Spinner.js"></script>
<script type="text/javascript" src="../../js/SpinnerField.js"></script>
<script type="text/javascript">
	Ext.onReady(function(){
		//提示时必须用
		Ext.QuickTips.init();
		//查询条件：部门编号、部门名称、上级部门
		var deptForm;
		
		var txt_deptCode = new Ext.form.TextField({
			id:'txt_deptCode',
			name:'queryDept.deptCode',
			fieldLabel:'部门编号',
			width:100,
			allowBlank:true,
			msgTarget:'side'//side  title under
		});
		
		var txt_deptName = new Ext.form.TextField({
			id:'txt_deptName',
			name:'queryDept.deptName',
			fieldLabel:'部门名称',
			width:100,
			allowBlank:true,
			msgTarget:'side' //side  title under
		});
		
		var cmb_higherDept = new Ext.form.ComboBox({
			//hiddenName才是提交到后台的input的name,这里hiddenName的值不能与id相同，否则你会出问题
			id:'cmb_higherDept',
			hiddenName:'queryDept.higherDeptId',
			fieldLabel:'上级部门',
			emptyText:'--请选择--',
			forceSelection:true,
			displayField:'deptName',
			valueField:'deptId',
			typeAhead:'true',
			selectOnfocus:true,
			triggerAction:'all',
			//mode:'local', //页面首次加载时从本地加载数据，常与 autoLoad:true连用
			//页面加载时不加载数据，当首次点击combobox时加载数据 作用等同于mode:'local' + autoLoad:true
			mode:'remote',
			store:new Ext.data.JsonStore({
				url:'dept/deptInfo_load.do',
				//autoLoad:true,
				fields:['deptName','deptId']
			}),
			allowBlank:true
		});
		//查询按钮
		var btn_query = new Ext.Button({
			id:'btn_query',
			text:'查询',
			handler:function(){
				if(queryForm.getForm().isValid()){
					queryForm.form.submit({
						waitMsg:'正在查询部门信息...',
						url:'dept/deptInfo_loadByPage.do',
						method:'post',
						params:{start:0,limit:10},
						//后台 result.addProperty("success", false); 时执行
						failure:function(){
							Ext.Msg.alert("提示","查询数据失败，请重试！");
						},
						//后台 result.addProperty("success", true); 时执行
						success:function(form,action){
							var result = Ext.util.JSON.decode(action.response.responseText);
							//从本地result中加载数据
							store.loadData(result,false);
						}
					});
				}
				
			}
		});
		
		//查询form
		var queryForm = new Ext.form.FormPanel({
			height:50,
			renderTo:'queryForm',
			region:'north',
			frame:true,
			layout:'form',
			items:[
			       {
			    	   layout:'column',
					   items:[{
						   		layout:'form',
						   		columnWidth:.25,
						   		items:[txt_deptCode]
					          },
					          {
					        	layout:'form',
					        	columnWidth:.25,
					        	items:[txt_deptName]
					          },
					          {
					        	  layout:'form',
					        	  columnWidth:.25,
					        	  items:[cmb_higherDept]
					          },
					          {
					        	  layout:'form',
					        	  columnWidth:.25,
					        	  items:[btn_query]
					          }
					   		],
			       }
			    ]
		});
		//查询条件：部门编号、部门名称、上级部门
		
		//定义grid
		var column = new Ext.grid.ColumnModel([
				{header:'部门Id',width:280,dataIndex:'deptId',sortable:true},
			 	{header:'部门编号',width:150,hidden:true,dataIndex:'deptCode',sortable:true},
			 	{header:'部门名称',width:150,dataIndex:'deptName',sortable:true},
			 	{header:'上级部门Id',width:100,hidden:true,dataIndex:'higherDeptId',sortable:true},
			 	{header:'上级部门名称',width:150,dataIndex:'higherDeptName',sortable:true}
			]);
		//数据源	
		var store = new Ext.data.JsonStore({
			url:'dept/deptInfo_loadByPage.do',
			root:'result',
			totalProperty:'totalProperty',
			fields:['deptId','deptCode','deptName','higherDeptId','higherDeptName']
		});
		
		
		//定义grid
		var deptGrid = new Ext.grid.GridPanel({
			renderTo:'deptGrid',
			cm:column,
			region:'center',
			store:store,
			//必须放在一个容器里才可以这样用 
			height:document.body.clientHeight,
			tbar:['->',{
				text:'查看',
				handler:function(){
					var record = deptGrid.getSelectionModel().getSelected();
					if(record == null){
						alert("请选择查看的部门信息！");
					}else{
						Ext.Ajax.request({
							url:'dept/deptInfo_getDeptInfo.do',
							params:{deptId:record.get("deptId")},
							callback:function(options,success,response){
								if(success){
									var result = Ext.util.JSON.decode(response.responseText);
									if(result.success){
										//遮盖父窗口，类似于模态窗口
										Ext.getBody().mask();
										showWindow("");
										
										//设置查看form 内部组件不可编辑
										Ext.getCmp('btn_Confirm').setVisible(false);
										//设置部门combobox显示值
										Ext.getCmp('higherDeptCmb').setRawValue(result.higherDeptName);
										//Ext.getCmp('higherDeptCmb').setValue(result.higherDeptId);
										Ext.getCmp('higherDeptCmb').setDisabled(true);
										Ext.getCmp('deptCodeTxt').setDisabled(true);
										Ext.getCmp('deptNameTxt').setDisabled(true);
										//设置form 中的组件值
										deptForm.getForm().setValues({
											"dept.deptCode":result.deptCode,
											"dept.deptName":result.deptName
											//"dept.higherDeptId":result.higherDeptId
										});
									}else{
										alet("后台查询部门信息失败！");
									}
								}else{
									alert("发送查询部门信息请求失败!");
								}
							}
						});
					}
				}
			},{
				text:'增加',
				handler:function(){
					//遮盖父窗口，类似于模态窗口
					Ext.getBody().mask();
					showWindow("dept/deptInfo_save.do");
				}
			},{
				text:'删除',
				handler:function(){
					var record = deptGrid.getSelectionModel().getSelected();
					if(record != null){
						Ext.Ajax.request({
							url:'dept/deptInfo_delete.do',
							params:{deptId:record.get("deptId")},
							success:function(){
								alert("删除成功！");
								store.reload();
							},
							failure:function(){
								alert("删除失败！");
							}
						});
					}else{
						alert("请选择要删除的部门信息！");
					}
				}
			},{
				text:'修改',
				handler:function(){
					var record = deptGrid.getSelectionModel().getSelected();
					if(record != null){
						//遮盖父窗口，类似于模态窗口
						Ext.getBody().mask();
						showWindow("dept/deptInfo_update.do");
						
						//设置部门combobox显示值,增加或修改提交时会自动把code值（higherDeptId）提交到后台
						Ext.getCmp('higherDeptCmb').setRawValue(record.get("higherDeptName"));
						//设置值
						deptForm.getForm().setValues({
							"dept.deptId":record.get("deptId"),
							"dept.deptCode":record.get("deptCode"),
							"dept.deptName":record.get("deptName")
						});
					}else{
						alert("请选择需要修改的部门信息！");
					}
				}
			}],
			bbar:new Ext.PagingToolbar({
				pageSize : 10, //每页显示几条
				store : store,
				beforePageText:"当前第",   
	            afterPageText:"页，共{0}页",   
	            lastText:"尾页",   
	            nextText :"下一页",   
	            prevText :"上一页",   
	            firstText :"首页",                           
		        displayInfo:true, 
		        displayMsg:'显示第{0}条数据到{1}条数据,一共有{2}条', 
		        emptyMsg:'没有记录'
			})
		});
		//加载数据 //分页store.load放在最后
		store.load({
			params:{start:0,limit:10}
		});
		
		//定义弹出窗口内组件:部门编号、部门名称、上级部门
		//显示窗口，窗口中包含一个form,form中包含一些元素
		function showWindow(urlStr){
			var deptCodeTxt = new Ext.form.TextField({
				id:'deptCodeTxt',
				name:'dept.deptCode',
				fieldLabel:'部门编号',
				width:150,
				allowBlank:false,
				blankText:'部门编号不能为空',
				msgTarget:'side'
			});
			
			var deptNameTxt = new Ext.form.TextField({
				id:'deptNameTxt',
				name:'dept.deptName',
				fieldLabel:'部门名称',
				width:150,
				allowBlank:true,
				msgTarget:'side'
			});
			
			var higherDeptCmb = new Ext.form.ComboBox({
				id:'higherDeptCmb',
				hiddenName:'dept.higherDeptId',
				fieldLabel:'上级部门',
				width:150,
				displayField:'deptName',
				valueField:'deptId',
				emptyText:'--请选择--',
				//经过指定延迟（typeAheadDelay,默认为 250）后弹出并自动选择输入的文本
				typeAhead:true,
				//值为true时将限定选中的值为列表中的值
				forceSelection:true,
				//获取焦点时加载数据 
				selectOnFocus:true,
				triggerAction:'all',
				mode:'local',
				store:new Ext.data.JsonStore({
					url:'dept/deptInfo_load.do',
					autoLoad:true,
					fields:['deptName','deptId']
				}),
				allowBlank:true
			});
			
			//部门ID deptId
			var idText = new Ext.form.TextField({
				name:'dept.deptId',
				hidden:true,
				width:100
			});
			//增加，修改，查看的form表单
			deptForm = new Ext.form.FormPanel({
				width:300,
				height:130,
				frame:true,
				border:false,
				buttonAlign:'right',
				items:[deptCodeTxt,deptNameTxt,higherDeptCmb,idText],
				buttons:[{
					id:'btn_Confirm',
					text:'确定',
					handler:function(){
						if(deptForm.getForm().isValid()){
							deptForm.form.submit({
								waitMsg:'正在提交数据...',
								url:urlStr,
								method:'post',
								failure:function(){
									Ext.Msg.alert("提示","操作失败请重试！");
								},
								success:function(form,action){
									var result = Ext.util.JSON.decode(action.response.responseText);
									//关闭窗口，重新加载数据 
									win.close();
									store.reload();
									//使父窗口可编辑，不遮盖s
									Ext.getBody().unmask();
								}
							});
						}
					}
				}]
			});
			//弹出窗口
			var win = new Ext.Window({
				title:'部门信息',
				items:[deptForm],
				border:false,
				//窗口是否可以改变大小
				resizable:false,
				//窗口是否可拖拽移动
				draggable:false,
				width:300,
				height:150,
				xtype:'form',
				x:100,
				y:20,
				listeners:{'beforedestroy':function(){Ext.getBody().unmask();}}
			});
			win.show();
		}
		
		new Ext.Viewport({
			layout:'border',
			border:false,
			items:[queryForm,deptGrid]
		});
	});


</script>
</head>
<body>
	<div id="queryForm"></div>
	<div id="deptGrid"></div>
</body>
</html>